<template>
    <aside class="path-mode-wrap m-b bt-line" v-if="isHidden">
        <h4 class="path-mode__title no-select m-b">画笔属性</h4>
        <div class="path-mode__item">
            <h5 class="title">粗细</h5>
            <input 
                class="size-input__picker cursor"
                step="1"
                min="1"
                v-model="elementAttr.strokeWidth"
                max="25" 
                type="range"
                @input="onSizeUpdate"/>
            <span class="path-size_value">{{ elementAttr.strokeWidth }}</span>
        </div>
        <div class="path-mode__item">
            <h5 class="title">虚线</h5>
            <input 
                class="size-input__picker cursor"
                step="1"
                min="0"
                v-model="elementAttr.strokeDashArray"
                max="100" 
                type="range"
                @input="onStrokeDashDistanceUpdate"/>
            <span class="path-size_value">{{ elementAttr.strokeDashArray }}</span>
        </div>
        <div class="path-mode__item">
            <h5 class="title">绘制颜色</h5>
            <input 
                class="color-input__picker cursor" 
                v-model="elementAttr.stroke" 
                type="color" 
                list=""
                @input="onChangeColor"/>
            <!-- <span class="path-size_value">{{ selectColor }}</span> -->
        </div>
    </aside>
</template>

<script setup name="PathAttribute">
import useSharedCore from '@/hooks/shared'

const { coverEditor, fabric } = useSharedCore();
const isHidden = ref(false)
const layerType = ref('')
const elementAttr = reactive({
    strokeWidth: 2,
    strokeDashArray: 0,
    stroke: '#000000'
})

function onSizeUpdate(evt) {
    const { value = '' } = evt.target
    updateAttribute()
}

function onStrokeDashDistanceUpdate(evt) {
    const { value = '' } = evt.target
    updateAttribute()
}

function onChangeColor (evt) {
    const { value = '' } = evt.target
    updateAttribute()
}

function updateAttribute(params) {
    // 更新
    const node = coverEditor?.canvas?.getActiveObject()
    if (node) {
        node.set({
            strokeWidth: parseInt(elementAttr.strokeWidth),
            strokeDashArray: [elementAttr.strokeDashArray],
            stroke: elementAttr.stroke
        })
        coverEditor.canvas.renderAll()
    } else {
        // 新增path
        coverEditor.setLayerAttributes({ 
            strokeWidth: elementAttr.strokeWidth, 
            fill: elementAttr.stroke, 
            strokeDashDistance: elementAttr.strokeDashArray,
            used: 'Path' 
        })
    }
}

function getActiveObjectAttr (evt) {
    const active = coverEditor?.canvas?.getActiveObject()
    if (evt && evt.target && evt !== active) return
    if (active) {
        if (['polyline', 'path', 'line'].includes(active.type)) {
            isHidden.value = true
        } else isHidden.value = false
        layerType.value = active.type
    }
}

function drawingComplete (active) {
    if (active) {
        layerType.value = active.type
        if (layerType.value === 'PencilBrush') {
            isHidden.value = true
        } 
    }
}

onMounted(() => {
    // 监听fabric选中更新的selectOne事件
    // selectOne 事件在ServePlugin插件注入的
    coverEditor.on('selectOne', getActiveObjectAttr);
    // 监听绘制完成回调，做一些恢复操作
    coverEditor.on('onDrawingComplete', drawingComplete)
    // coverEditor.canvas.on('object:modified', getActiveObjectAttr);
})

onBeforeUnmount(() => {
    coverEditor.off('selectOne', getActiveObjectAttr);
    coverEditor.off('onDrawingComplete', drawingComplete)
    // coverEditor.canvas.off('object:modified', getActiveObjectAttr);
})

</script>

<style lang="scss" scoped>
    .path-mode {
        font-size: 14px;
        &__title {
            font-size: 14px;
        }
        &__item {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            margin-bottom: 12px;
            .title {
                font-size: 14px;
                margin-right: 5px;
            }
            .path-size_value {
                padding-left: 5px;
                font-weight: bold;
            }
            .select-size {
                flex: 1;
            }
            input[type="color"] {
                // border: none;
                // background: none;
                // -webkit-appearance: none;
                // appearance: none;
                border-width: 0px;
                // border-style: none;
                outline: none;
                border-radius: 3px;
            }
        }
    }
</style>